<template>
    <div>
        <div class="photoinfo-container">
            <!-- 标题区 -->
            <h3 class="title">{{ photoInfo.name }}</h3>
            <p class="subtitle">
                <span>发表时间：{{ photoInfo.dateAdd }}</span>
                <span>浏览次数：{{ photoInfo.views }}</span>
            </p>
            <hr>

            <!-- 缩略图区 -->
            <div class="pics">
                <vue-preview :slides="pics" @close="handleClose"></vue-preview>
            </div>

            <!-- 内容区 -->
            <div class="content" v-html="content"></div>

            <!-- 评论区 -->
            <comment :refId="id"></comment>
        </div>
    </div>
</template>

<script>
    //导入评论子组件
    import comment from "../subcomponents/Comment.vue"

    export default {
        data() {
            return {
                id: this.$route.query.id,  
                photoInfo: '',  //图片信息
                content: '',    //图片描述
                pics: []      //缩略图信息               
            }
        },
        components: {
            comment
        },
        created() {
            this.getPhotoInfo()
        },
        methods: {
            getPhotoInfo() { 
                this.$http.get('shop/goods/detail?id='+this.id).then( (res) => {
                    if( res.data.code === 0 ) {
                        this.photoInfo = res.data.data.basicInfo
                        this.content = res.data.data.content
                        res.data.data.pics.forEach(item => {
                            this.pics.push({ src: item.pic, msrc: item.pic, alt: res.data.data.basicInfo.name, title: res.data.data.basicInfo.name, w: 600, h: 400 })
                        });

                    }
                } )
            },
            handleClose () {
                console.log('close event')
            }
        },
    }
</script>

<style lang="scss">
.photoinfo-container{
    width: 100%;
    padding: 10px 5px;
    .title{
        font-size: 16px;
        text-align: center;
        line-height: 20px;
        padding-bottom: 5px;
    }
    .subtitle{
        display: flex;
        justify-content: space-between;
        span{
            font-size: 12px;
            color: #666;
        }
    }
    .pics{
        width: 100%;
        img{
            width: 100%;
            height: auto;
        }
    }
    .content{
        width: 100%;
        p{
            font-size: 14px !important;
            margin-bottom: 15px !important;
            line-height: 22px !important;
            img{
                width: 100%;
                height: auto;
            }
        }
    }

}
</style>